<template>
  <div class="formAnalysis">
    <ul>
<!--      单选-->
      <li>
        <div class="title">1.「<span>单选</span>」单选标题</div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="选项"
            width="240">
          </el-table-column>
          <el-table-column
            prop="name"
            label="小计"
            width="240">
          </el-table-column>
          <el-table-column
            prop="address"
            label="比例">
            <template slot-scope="scope">
              <el-progress :percentage="50"></el-progress>
            </template>
          </el-table-column>
        </el-table>
        <div class="total">
          <div class="fieldName">本题有效填写人次</div>
          <div class="number">0</div>
        </div>
      </li>
<!--      下拉单选-->
      <li>
        <div class="title">1.「<span>单选</span>」单选标题</div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="选项"
            width="240">
          </el-table-column>
          <el-table-column
            prop="name"
            label="小计"
            width="240">
          </el-table-column>
          <el-table-column
            prop="address"
            label="比例">
            <template slot-scope="scope">
              <el-progress :percentage="50"></el-progress>
            </template>
          </el-table-column>
        </el-table>
        <div class="total">
          <div class="fieldName">本题有效填写人次</div>
          <div class="number">0</div>
        </div>
      </li>
<!--      多选-->
      <li>
        <div class="title">2.「<span>多选</span>」单选标题</div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="选项"
            width="240">
          </el-table-column>
          <el-table-column
            prop="name"
            label="小计"
            width="240">
          </el-table-column>
          <el-table-column
            prop="address"
            label="比例">
            <template slot-scope="scope">
              <el-progress :percentage="50"></el-progress>
            </template>
          </el-table-column>
        </el-table>
        <div class="total">
          <div class="fieldName">本题有效填写人次</div>
          <div class="number">0</div>
        </div>
      </li>
<!--      多行填写-->
      <li>
        <div class="title">3.「<span>单行填空</span>」单选标题</div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="昵称"
            width="240">
          </el-table-column>
          <el-table-column
            prop="name"
            label="填写内容"
            width="240">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作">
            <template slot-scope="scope">
              <el-progress :percentage="50"></el-progress>
            </template>
          </el-table-column>
        </el-table>
        <div class="total">
          <div class="fieldName">本题有效填写人次</div>
          <div class="number">0</div>
        </div>
      </li>
<!--      上传图片-->
      <li>
        <div class="title">3.「<span>上传图片</span>」单选标题</div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="昵称"
            width="240">
          </el-table-column>
          <el-table-column
            prop="address"
            label="上传内容">
            <template slot-scope="scope">
                 <div class="imgList">
                   <img src="@/assets/images/default-cover.png"/>
                 </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="total">
          <div class="fieldName">本题有效填写人次</div>
          <div class="number">0</div>
        </div>
      </li>
<!--      企业-->
      <li>
        <div class="title">3.「<span>企业</span>」单选标题</div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="昵称"
            width="240">
          </el-table-column>
          <el-table-column
            prop="name"
            label="填写内容"
            width="240">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作">
            <template slot-scope="scope">
              <el-progress :percentage="50"></el-progress>
            </template>
          </el-table-column>
        </el-table>
        <div class="total">
          <div class="fieldName">本题有效填写人次</div>
          <div class="number">0</div>
        </div>
      </li>
<!--      姓名-->
      <li>
        <div class="title">3.「<span>姓名</span>」单选标题</div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="昵称"
            width="240">
          </el-table-column>
          <el-table-column
            prop="name"
            label="填写内容"
            width="240">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作">
            <template slot-scope="scope">
              <el-progress :percentage="50"></el-progress>
            </template>
          </el-table-column>
        </el-table>
        <div class="total">
          <div class="fieldName">本题有效填写人次</div>
          <div class="number">0</div>
        </div>
      </li>
<!--      地址-->
      <li>
        <div class="title">3.「<span>地址</span>」单选标题</div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="昵称"
            width="240">
          </el-table-column>
          <el-table-column
            prop="name"
            label="填写内容"
            width="240">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作">
            <template slot-scope="scope">
              <el-progress :percentage="50"></el-progress>
            </template>
          </el-table-column>
        </el-table>
        <div class="total">
          <div class="fieldName">本题有效填写人次</div>
          <div class="number">0</div>
        </div>
      </li>
<!--      职务-->
      <li >
        <div class="title">3.「<span>职务</span>」单选标题</div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="昵称"
            width="240">
          </el-table-column>
          <el-table-column
            prop="name"
            label="填写内容"
            width="240">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作">
            <template slot-scope="scope">
              <el-progress :percentage="50"></el-progress>
            </template>
          </el-table-column>
        </el-table>
        <div class="total">
          <div class="fieldName">本题有效填写人次</div>
          <div class="number">0</div>
        </div>
      </li>
<!--      性别-->
      <li >
        <div class="title">3.「<span>职务</span>」单选标题</div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="昵称"
            width="240">
          </el-table-column>
          <el-table-column
            prop="name"
            label="填写内容"
            width="240">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作">
            <template slot-scope="scope">
              <el-progress :percentage="50"></el-progress>
            </template>
          </el-table-column>
        </el-table>
        <div class="total">
          <div class="fieldName">本题有效填写人次</div>
          <div class="number">0</div>
        </div>
      </li>
<!--      电话-->
      <li>
        <div class="title">3.「<span>电话</span>」单选标题</div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="昵称"
            width="240">
          </el-table-column>
          <el-table-column
            prop="name"
            label="填写内容"
            width="240">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作">
            <template slot-scope="scope">
              <el-progress :percentage="50"></el-progress>
            </template>
          </el-table-column>
        </el-table>
        <div class="total">
          <div class="fieldName">本题有效填写人次</div>
          <div class="number">0</div>
        </div>
      </li>
<!--      生日-->
      <li>
        <div class="title">3.「<span>生日</span>」单选标题</div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="选项"
            width="240">
          </el-table-column>
          <el-table-column
            prop="name"
            label="小计"
            width="240">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作">
            <template slot-scope="scope">
              <el-progress :percentage="50"></el-progress>
            </template>
          </el-table-column>
        </el-table>
        <div class="total">
          <div class="fieldName">本题有效填写人次</div>
          <div class="number">0</div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "formAnalysis",
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
    }
  },
}
</script>
<style scoped lang="scss">
.formAnalysis {
  width: 1000px;
  margin: auto;
  padding-top: 15px;

  ul {
    li {
      list-style: none;
      padding: 24px;
      border: 1px solid #e9e9e9;
      border-radius: 4px;
      margin-bottom: 10px;

      .title {
        font-size: 16px;
        font-weight: 500;
        color: #222333;
        line-height: 24px;
        margin-bottom: 20px;

        span {
          color: #2d8cf0;
        }
      }
    }

  }

}
.total {
  font-weight: bold;
  padding: 16px;
  color: rgba(0, 0, 0, .85);
  background: #fafafa;
  border-radius: 0 0 4px 4px;
  display: flex;
  font-size: 14px;
  margin-top: 10px;
  .fieldName {
    width:28%;
  }
}
.imgList {
  display: flex;
    img {
      width: 60px;
      height: 60px;
      object-fit: cover;
      margin-right: 10px;


  }
}
</style>
